<template>
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('Info') }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <el-descriptions v-if="!isEmpty(baTable.form.extend!.info)" :column="2" border>
                    <el-descriptions-item label="ID">
                        {{ baTable.form.extend!.info.id }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户">
                        {{ baTable.form.extend!.info.user?.nickname + '(' + baTable.form.extend!.info.user?.username + ')' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="类型">
                        {{ baTable.form.extend!.info.type?.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="提交时间">
                        {{ timeFormat(baTable.form.extend!.info.create_time) }}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="是否回复">
                        {{ baTable.form.extend!.info.status == 1 ? '已回复' : '待回复' }}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="反馈内容">
                        {{ baTable.form.extend!.info.content }}
                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="反馈内容">
                        <el-space wrap>
                            <div v-for="(fit,index) in baTable.form.extend!.info.images" :key="index" class="block">
                                <el-image style="width: 100px; height: 100px" show-progress  :preview-src-list="baTable.form.extend!.info.srcList"
                                          :initial-index="index" :src="fit.url" />
                            </div>
                        </el-space>

                    </el-descriptions-item>
                    <el-descriptions-item :width="120" :span="2" label="回复内容" label-class-name="color-red">
                        <el-input
                            v-model="baTable.form.extend!.info.replyContent"
                            rows="4"
                            maxlength="230"
                            placeholder="请输入回复内容"
                            show-word-limit
                            type="textarea"
                            :disabled="baTable.form.extend!.info.status == 1"
                        />
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-scrollbar>
        <template #footer>
            <div v-if="baTable.form.extend!.info.status == 0">
                <el-button v-blur @click="onRestore(baTable.form.extend!.info.id, baTable.form.extend!.info.replyContent)" type="success">
                    <Icon color="#ffffff" name="el-icon-RefreshRight" />
                    <span class="table-header-operate-text">回复</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type BaTable from '/@/utils/baTable'
import { timeFormat } from '/@/utils/common'
import { isEmpty } from 'lodash-es'
import { ElMessageBox } from 'element-plus'
import { restore } from '/@/api/backend/feedback/records'

const baTable = inject('baTable') as BaTable

const { t } = useI18n()

const replyContent = ref('')
const onRestore = (id: number, replyContent: string) => {
    ElMessageBox.confirm(t('确认回复当前内容吗?'), '', {
        confirmButtonText: t('确认'),
        cancelButtonText: t('Cancel'),
    })
        .then(() => {
            restore(id, replyContent).then(() => {
                baTable.toggleForm()
                baTable.onTableHeaderAction('refresh', {})
            })
        })
        .catch(() => {})
}
</script>

<style scoped lang="scss">
:deep(.color-red) {
    color: var(--el-color-danger) !important;
}

.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }

    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
